<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-12 10:35:30
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-06 17:49:11
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <span>在线报名</span>
      </div>
      <div class="ipt">
        <el-input v-model="input" placeholder="" clearable></el-input>
        <el-button type="primary" size="default" @click="search"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="apply">
        <div>
          <span>服务商：</span>
          <el-select
            v-model="fwValue"
            placeholder="请选择服务商"
            clearable
            @change="fwChange"
          >
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px">
          <span>所在地：</span>
          <el-cascader
            clearable
            v-model="value"
            :options="areaList"
            :props="defaultParams"
            @change="handChange"
            placeholder="请选择所在地"
            style="width: 200px"
          ></el-cascader>
        </div>
      </div>
      <div class="lattice-content">
        <div class="table">
          <div class="lattice" v-for="(item, index) in signUpList" :key="index">
            <div class="lattice-header">
              <div class="lattice-header-title">
                {{ item.examinationName }}
                <span class="area">
                  {{ item.areaName }}
                </span>
              </div>

              <div class="lattice-header-price">
                <span
                  style="
                    font-size: 22px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                  "
                >
                  {{ item.terminalPrice }}
                </span>
                <span
                  style="
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                  "
                >
                  /人
                </span>
              </div>
            </div>
            <div class="lattice-main">
              <div class="lattice-content">
                <div class="lattice-content-specific">
                  <div class="lattice-name">考试批次</div>
                  <div class="lattice-specific">{{ item.batchName }}</div>
                </div>
                <div class="lattice-content-specific">
                  <div class="lattice-name">报名时间</div>
                  <div class="lattice-specific">
                    <div v-if="item.enrollStart == null">-</div>
                    <div v-else>
                      {{ item.enrollStart | time }} 至
                      {{ item.enrollEnd | time }}
                    </div>
                  </div>
                </div>
                <div class="lattice-content-specific">
                  <div class="lattice-name">发布公司</div>
                  <div class="lattice-specific">{{ item.company }}</div>
                </div>
              </div>
            </div>
            <div class="immediately" @click="gotoStaList(item)">立即报名</div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total,sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getList, getServiceProvide } from "@/api/IndividualUser/signUp";
import { getArea } from "@/api/signUp";
export default {
  filters: {
    time: function (value) {
      let a = value.split(" ");
      return a[0];
    },
  },
  data() {
    return {
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
      },
      // 区域
      areaList: [],
      total: 0,
      pageSize: 15,
      pageNum: 1,
      input: "",
      value: "",
      fwValue: "",
      signUpList: [],
      options: [],
      query: "",
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  created() {
    this.getList();
    this.getAreaList();
    this.getFwList();
  },
  methods: {
    // 服务商查询
    fwChange() {
      this.getList();
    },
    handChange(e) {
      if (e) {
        this.value = e[1];
      }
      this.getList();
    },
    // 获取所有地区
    getAreaList() {
      getArea().then((res) => {
        let data = res.data;
        this.areaList = this.getTreeData(data);
      });
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    search() {
      this.getList();
    },
    // 获取服务商列表
    getFwList() {
      getServiceProvide().then((res) => {
        this.options = res.rows;
      });
    },
    // 获取服务商列表
    getList() {
      getList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        identification: this.input,
        areaId: this.value,
        orgId: this.fwValue,
      }).then((res) => {
        this.signUpList = res.rows;
        this.total = res.total;
      });
    },
    gotoStaList(item) {
      this.$router.push("/studentInfo?id=" + item.id);
      sessionStorage.setItem("ExaInfo", JSON.stringify(item));
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    margin-left: 5px;
    border-bottom: 2px solid #1267fa;
    font-size: 16px;
    font-weight: 700;
    height: 64px !important;
    height: 30px;
    display: flex;
    line-height: 64px;
    span {
      font-size: 16px;
    }
    p {
      margin-left: 10px;
      height: 16px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    display: flex;
    align-items: center;
    margin: auto;
    /deep/.el-input__inner {
      width: 300px;
      height: 34px;
    }
  }
}
.content {
  margin-top: 20px;
  .lattice-content {
    height: 635px;
    flex-wrap: wrap;
    .table {
      display: flex;
      flex-wrap: wrap;
    }
    .lattice {
      margin-right: 15px;
      margin-top: 15px;
      position: relative;
      width: 1.536458rem;
      height: 1.208333rem;
      background-color: #fff;
      box-shadow: 0px 0px 13px 0px rgba(4, 56, 113, 0.1);
      border-radius: 7px;
      overflow: hidden;
      .lattice-header {
        height: 60px;
        width: 100%;
        background-color: #1267fa;
        border-radius: 7px 7px 0 0;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lattice-header-title {
          font-size: 22px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .lattice-main {
        display: flex;
        justify-content: center;
        .lattice-content {
          width: 1.536458rem;
          height: 1.208333rem;
          background: #fff;
          border-radius: 8px;
          .lattice-content-specific {
            margin-top: 15px;
            padding-left: 22px;
            .lattice-name {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #a6a8b4;
            }
            .lattice-specific {
              margin-top: 5px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #2b2b2b;
            }
          }
        }
      }
      .immediately {
        position: absolute;
        bottom: -60px;
        background: #d6e5ff;
        border-radius: 0px 0px 8px 8px;
        opacity: 0.71;
        width: 100%;
        height: 60px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1267fa;
        line-height: 60px;
        text-align: center;
        transition: 1s;
        cursor: pointer;
      }
    }
  }
}
.lattice:hover .immediately {
  bottom: 0 !important;
}
.el-pagination {
  margin-top: 80px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}

.apply {
  display: flex;
}
.area {
  display: inline-block;
  width: 60px;
  height: 20px;
  font-size: 12px;
  background-color: #96bbfa;
  color: #1267fa;
  line-height: 20px;
  text-align: center;
}
</style>